<template>
    <div class="goodsOnWrap">
        <loginHeader style="position: fixed; top: 0; z-index: 50;"></loginHeader>
        <div style="background:#ffffff;box-shadow:0px 2px 3px 0px rgba(153,153,153,0.3); position: fixed; top: 38px;left: 0; right: 0; z-index: 20;">
            <div class="goodsOnWrapHeader">
                <img class="logo" src="./../../assets/img/login/LoginLOGO.png" alt="">
                <p class="goodsOnWrapHeaderTxt">商品发布</p>
            </div>
        </div>
        <div style="height: 125px;"></div>
        <!-- 商品发布中心内容 -->
        <div class="contentWrap">
            <div class="content">
                <!--A:提示-->
                <div class="contentA">
                    <p>
                        <i class="el-icon-warning" style="color: #2a91fe;background: #FFFFFF;font-size: 17px;"></i>
                        亲，当您遇到店铺保证金、资质认证等问题时，请先确认对方的身份后再沟通，谨防上当受骗。
                    </p>
                </div>
                <!--B:定位内容选择-->
                <div class="contentB">
                    <span @click="selectTo('contentC',1)" :class="selectIndex ==1?'contentBselect':''">基础信息</span>
                    <span @click="selectTo('contentD',2)" :class="selectIndex ==2?'contentBselect':''">销售信息</span>
                    <span @click="selectTo('contentE',3)" :class="selectIndex ==3?'contentBselect':''">商品描述</span>
                    <span @click="selectTo('contentF',4)" :class="selectIndex ==4?'contentBselect':''">支付信息</span>
                    <span @click="selectTo('contentG',5)" :class="selectIndex ==5?'contentBselect':''">物流信息</span>
                    <span @click="selectTo('contentH',6)" :class="selectIndex ==6?'contentBselect':''">售后服务</span>
                </div>
                <!-- 新增类目(第二次增加) -->
                <div class="addClass">
                    <p class="addClassOne"><span>当前类目：</span>服装配饰/皮带/帽子/围巾 ＞ 领部配件 ＞ 领带</p>
                    <p class="addClassTwo" @click="toSelectKind">切换类目</p>
                </div>
                <!--C:基础信息-->
                <div class="contentC contentDiv" id="contentC">
                    <p class="contentDivTitle">基础信息</p>
                    <div>
                        <!-- C:宝贝标题 -->
                        <div class="contentCtop">
                            <span><i style="color: red;font-size: 18px;">*</i>宝贝标题</span>
                            <input type="text" value="" @input="contentCchange" placeholder="最多允许输入30个汉字（60字符）">
                            <p class="contentCp">{{contentCinputLength}}/60</p>
                        </div>
                        <!-- C:类目属性 -->
                        <div class="contentCbottom">
                            <p class="contentCbottomP">
                                <span>类目属性</span>
                                <span>错误填写宝贝属性，可能会引起宝贝下架或搜索流量减少，影响您的正常销售，请认真准确填写！</span>
                            </p>
                            <div class="contentCbottomDiv">
                                <div>
                                    <span><i style="color: red; font-size: 20px;margin-right: 5px;">*</i>发货地：</span>
                                    <input type="text">
                                </div>
                                <div>
                                    <span>品牌：</span>
                                    <input type="text">
                                </div>
                                <div>
                                    <span>货号：</span>
                                    <input type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--D:销售信息-->
                <div class="contentD contentDiv" id="contentD">
                    <p class="contentDivTitle">销售信息</p>
                    <!--D:销售信息内容-->
<!--                    <div class="contentDtop">-->
<!--                        <div>-->
<!--                            <span><i style="color: red; font-size: 20px;margin-right: 5px;">*</i>商品价</span>-->
<!--                            <input type="text" placeholder="0.00">元-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <span><i style="color: red; font-size: 20px;margin-right: 5px;">*</i>邮费</span>-->
<!--                            <input type="text" placeholder="0.00">元-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <span><i style="color: red; font-size: 20px;margin-right: 5px;">*</i>总数量</span>-->
<!--                            <input type="text" placeholder="0.00">元-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="contentDtop">
                        <div class="shopInfo">
                            <p class="shopInfoText"><span>*</span>颜色分类</p>
                            <div class="shopInfoContent">
                                <div>
                                    <input type="text">
                                    <input type="text">
                                </div>
                                <div>
                                    <div>
                                        <p>上传图片</p>
                                    </div>
                                    <div>
                                        <p>上传图片</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="shopInfo">
                            <p class="shopInfoText"><span>*</span>尺码</p>
                            <div class="shopInfoContent">
                                <input type="text">
                                <input type="text">
                            </div>
                        </div>
                        <div class="shopInfo">
                            <p class="shopInfoText"><span>*</span>宝贝销售规格</p>
                            <div class="shopInfoContent">
                                <p><span>批量修改</span></p>
                                <div>
                                    填写规格
                                </div>
                            </div>
                        </div>
                        <div class="shopInfo">
                            <p class="shopInfoText"><span>*</span>邮费</p>
                            <div class="shopInfoContent">
                                <input type="text">元
                            </div>
                        </div>
                        <div class="shopInfo">
                            <p class="shopInfoText"><span>*</span>总数量</p>
                            <div class="shopInfoContent">
                                <input type="text">件
                            </div>
                        </div>
                    </div>
                    <div class="contentDbottom">
                        <span>商品条形码</span>
                        <input type="text" @input="contentDchange" placeholder="最多允许输入30个汉字(60字符)">
                        <p class="contentDbottomP">{{contentDinputLength}}/60</p>
                    </div>
                </div>
                <!--E:商品描述-->
                <div class="contentE contentDiv" id="contentE">
                    <p class="contentDivTitle">商品描述</p>
                    <div>
                        <!--第一块(宝贝图片)-->
                        <div class="contentEone contentEdiv">
                            <p class="contentEdivLeft"><span>*</span>宝贝图片</p>
                            <div class="contentEdivRight">
                                <p class="contentEoneRightTop">主图建议使用宽高比为1:1的图片,大小不能超过3MB；如果图片超过限制的大小，将自动为您压缩！第五张图发商品白底图可增加参与首页曝光机会</p>
                                <div class="contentEoneRightBottom">
                                    <!--宝贝图片: 上传图片原生(五张)-->
                                    <div class="contentEimgs" v-for="(item, index) in 5">
                                        <p class="contentEimgsP1">+</p>
                                        <p class="contentEimgsP2">添加上传图片</p>
                                        <input type="file" id="file" class="" @change="contentEimgsChange($event,index)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                                        <img class="" v-if="contentEimgs[index]" :src="contentEimgs[index]" @mouseenter="contentEimgsEnter(index)" alt="">
                                        <!--第一张图片头部-->
                                        <p v-if="index == 0" class="contentEimgsP3"><span>*</span>宝贝主图</p>
                                        <!--第五张图片头部-->
                                        <p v-if="index == 4" class="contentEimgsP3">宝贝白底图</p>
                                        <!--鼠标移入显示蒙版-->
                                        <div v-if="contentEimgsEnterIndex == index" class="contentEimgsDel" @mouseleave="contentEimgsLeave(index)">
                                            <!--蒙版中,删除所在下标图片-->
                                            <i class="el-icon-delete" @click="contentEimgsDel(index)"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--第二块(宝贝详情图)-->
                        <div class="contentEtwo contentEdiv">
                            <p class="contentEdivLeft"><span>*</span>宝贝详情图</p>
                            <div class="contentEdivRight">
                                <div class="contentEtwoRightContent">
                                    <div class="contentEtwoRightContentDiv">
                                        <!-- 放上传的图片 -->
                                        <div class="contentEtwoRightContentDivImg">
                                            <div v-for="(itemImg,indexImg) in contentEtwoImgs" style="position: relative;" @mouseenter="contentEtwoImgsEnter(indexImg)" @mouseleave="contentEtwoImgsLeave(indexImg)">
                                                <img :src="itemImg" alt="">
                                                <!-- 鼠标移动上去的蒙版 -->
                                                <div :id="contentEtwoImgsIndex == indexImg ? 'Block':'None'" class="contentEtwoRightContentDivImgZhezhao">
                                                    <div>
                                                        <i class="el-icon-delete" @click="contentEtwoRightContentDivImgDel(indexImg)"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 下面上传按钮 -->
                                        <div class="contentEtwoRightContentDivImgUpload">                                                            <p><i class="el-icon-plus"></i></p>
                                            <p>添加图片</p>
                                            <input type="file" id="contentEtwoFile" class="" @change="contentEtwoImgsChange($event)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--第三块(店铺中分类)-->
                        <div class="contentEthree contentEdiv">
                            <p class="contentEdivLeft">店铺中分类</p>
                            <div class="contentEdivRight contentEthreeRightContent">
                                <el-select v-model="goodsSortsSelect" @change="goodsSortsChange" filterable placeholder="请选择">
                                    <el-option v-for="item in goodsSorts" :key="item" :label="item" :value="item">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                </div>
                <!--F:支付信息-->
                <div class="contentF contentDiv" id="contentF">
                    <p class="contentDivTitle">支付信息</p>
                    <p class="contentFleft"><span>*</span>库存计数</p>
                    <p class="contentFright">买家拍下减库存</p>
                </div>
                <!--G:物流信息-->
                <div class="contentG contentDiv" id="contentG">
                    <p class="contentDivTitle">物流信息</p>
                    <p class="contentGleft"><span>*</span>配送方式</p>
                    <div class="contentGright">
                        <el-checkbox-group v-model="checkedLogistics" @change="checkedLogisticsChange">
                            <el-checkbox v-for="item in logistics" :label="item" :key="item">{{item}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <!--H:售后服务-->
                <div class="contentH contentDiv" id="contentH">
                    <p class="contentDivTitle">售后服务</p>
                    <div class="contentHone">
                        <p class="contentHoneLeft">售后服务</p>
                        <div class="contentHoneRight">
                            <el-checkbox-group v-model="checkList" @change="checkedAfterChange">
                                <p><el-checkbox label="1">提供发票</el-checkbox></p>
                                <p><el-checkbox label="2">保修服务</el-checkbox></p>
                                <p><el-checkbox label="3">服务承诺：该类商品，可支持【七天退货】服务</el-checkbox></p>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="contentHtwo">
                        <p class="contentHtwoLeft"><span>*</span>上架时间</p>
                        <div class="contentHtwoRight">
                            <el-radio-group v-model="radio" @change="lableChange">
                                <el-radio label="1">立即上架</el-radio>
                                <el-radio label="2">放入仓库</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
            </div>
            <!--I:提交宝贝信息-->
            <div class="contentIwrap">
                <div class="contentI">提交宝贝信息</div>
            </div>
        </div>
        <!-- 上传第五张宝贝图片,弹出提示 -->
        <div v-if="isHint" class="HintWrap">
            <div class="Hint">
                <p class="HintA"><span @click="HintN">×</span></p>
                <img class="HintB" src="./../../assets/img/goodsOn/goodsOnHint.png" alt="">
                <p class="HintC">第五张图发商品白底图可增加参与首页曝光机会</p>
                <p class="HintD">
                    <span @click="HintN">取消</span>
                    <span @click="HintN">确定</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import  loginHeader  from "./../login/LoginHeader";
    export default {
        name: "index",
        components:{
            loginHeader,
        },
        data(){
            return{
                // --------------------------------------第二块(),选项index
                selectIndex:1,
                // --------------------------------------第三块(基础信息),input框里value的长度
                contentCinputLength:0,
                // --------------------------------------第四块(销售信息),input框里value的长度
                contentDinputLength:0,
                // --------------------------------------第五块(商品描述)
                //选中的商品分类
                goodsSortsSelect:'',
                // 店铺中的分类
                goodsSorts:['衣服','食品','玩具'],
                // 宝贝图片,路径
                contentEimgs:['','','','',''],
                // 宝贝图片,鼠标移入显示蒙版(5:无, 0:第一张, 1:第二张, 2:第三张, 3:第四张, 4:第五张)
                contentEimgsEnterIndex:5,
                // 第五张宝贝图片上传是否弹出提示
                isHint:false,
                // 第五块宝贝详情图,img路径
                contentEtwoImgs:[],
                // 第五块宝贝详情图,鼠标移入哪一个img显示哪一个img的蒙版
                contentEtwoImgsIndex:-1,
                // --------------------------------------第六块(支付信息)

                // --------------------------------------第七块(物流信息)
                // 物流信息渲染
                logistics: ['中国邮政', '圆通速递', '天天快递', 'EMS', '优速快递', '快捷快递', '全峰快递', '中通快递', '顺丰速运', '韵达快递'],
                // 选中的物流
                checkedLogistics: [],
                // --------------------------------------第八块(售后服务)
                // 选中的售后服务
                checkList: [],
                //单选框 1,立即上架  2,放入仓库
                radio: '1',
            }
        },
        methods:{
            // -----------------------------------------------------------------------------第二块选项
            selectTo(domId,index){
                this.selectIndex = index;
                this.scrollTo(domId);
            },
            scroll(){
                console.log(1);
            },
            // 滚动
            scrollTo(domId){
                var x = $('#'+domId).offset().top - 240;
                var timerScroll = setInterval(function () {
                    window.scrollBy(0, 20);
                }, 1);
                window.addEventListener('scroll',()=>{
                    console.log(2);
                    // 向上滚动,selectIndex回到1
                    if($('#contentC').offset().top > 10){
                        this.selectIndex = 1;
                    }
                    // 获取滚动距离顶部的距离
                    var distanc = document.body.scrollTop || document.documentElement.scrollTop;
                    // 判断滚动是否到指定位置
                    if (distanc > x) {
                        clearInterval(timerScroll);
                    }
                    // 判断滚动是否到底部
                    $(window).scroll(function(){
                        var scrollTop = $(this).scrollTop();
                        var scrollHeight = $(document).height();
                        var windowHeight = $(this).height();
                        if(scrollTop + windowHeight == scrollHeight){
                            clearInterval(timerScroll);
                        }
                    });
                }, false);
            },
            // 新增当前类目
            toSelectKind(){
                this.global.startLoading();
                setTimeout(()=>{
                    this.global.endLoading();
                    this.$router.push("selectKind");
                },500);
            },
            // -----------------------------------------------------------------------------第三块
            // 判断第三块中input输入的长度
            contentCchange(e){
                // console.log(e.target.value);
                if(this.strLength(e.target.value) > 60){
                    console.log(this.strLength(e.target.value));
                    this.$message.closeAll();
                    this.$message({
                        showClose: true,
                        message: '超出了限制!',
                        type: 'warning'
                    });
                    this.contentCinputLength = this.strLength(e.target.value);
                }else{
                    this.$message.closeAll();
                    this.contentCinputLength = this.strLength(e.target.value);
                }

            },
            // -----------------------------------------------------------------------------第四块
            // 判断第四块input输入的长度
            contentDchange(e){
                if(this.strLength(e.target.value) > 60){
                    this.$message.closeAll();
                    this.$message({
                        showClose: true,
                        message: '超出了限制!',
                        type: 'warning'
                    });
                    this.contentDinputLength = this.strLength(e.target.value);
                }else{
                    this.$message.closeAll();
                    this.contentDinputLength = this.strLength(e.target.value);
                }
            },
            // 计算字符串的长度
            strLength(str){
                var len = 0;
                for (var i=0; i<str.length; i++) {
                    if (str.charCodeAt(i)>127 || str.charCodeAt(i)==94) {
                        len += 2;
                    } else {
                        len ++;
                    }
                }
                return len;
            },
            // -----------------------------------------------------------------------------第五块
            // 宝贝图片(五张上传)
            contentEimgsChange(e, index){
                console.log(index, e);
                this.contentEimgs.splice(index,1,"http://img5.imgtn.bdimg.com/it/u=1200889471,2010793696&fm=26&gp=0.jpg");
                // 如果上传的是第五张,弹出提示框
                if(index == 4){
                    this.isHint = true;
                }
            },
            // 宝贝图片(根据下标删除)
            contentEimgsDel(index){
                // 删除所在下标图片
                this.contentEimgs.splice(index,1,'');
                // 隐藏删除蒙版
                this.contentEimgsEnterIndex = 5;
            },
            // 宝贝图片,鼠标移入事件
            contentEimgsEnter(index){
                // 显示删除蒙版
                this.contentEimgsEnterIndex = index;
            },
            // 宝贝图片,鼠标移出事件
            contentEimgsLeave(index){
                // 隐藏删除蒙版
                this.contentEimgsEnterIndex = 5;
            },
            // 宝贝图片上传第五张提示消失
            HintN(){
                this.isHint = false;
            },
            // 宝贝详情图上传
            contentEtwoImgsChange(e){
                console.log(e);
                this.contentEtwoImgs.push("http://img5.imgtn.bdimg.com/it/u=1200889471,2010793696&fm=26&gp=0.jpg");
            },
            // 鼠标移入宝贝详情图上
            contentEtwoImgsEnter(index){
                console.log(index);
                this.contentEtwoImgsIndex = index;
            },
            // 鼠标移出宝贝详情图上
            contentEtwoImgsLeave(index){
                console.log(index);
                this.contentEtwoImgsIndex = -1;
            },
            // 删除宝贝详情图里的其中一张图片
            contentEtwoRightContentDivImgDel(index){
                console.log(index);
                this.contentEtwoImgs.splice(index, 1);
            },
            // 选择店铺分类
            goodsSortsChange(val){
                console.log(this.goodsSortsSelect);
            },
            // -----------------------------------------------------------------------------第七块
            // 选择物流
            checkedLogisticsChange(value) {
                console.log(value);
                console.log(this.checkedLogistics);
            },
            // -----------------------------------------------------------------------------第八块
            // 售后服务
            checkedAfterChange(){
                console.log(this.checkList);
            },
            // 上架时间
            lableChange(){
                // 1 立即上架,2 放入仓库
                console.log(this.radio);
            },
        },
        mounted(){

        }
    }
</script>

<style scoped>

    @import "./../../../static/testIndex.css";


</style>
